備忘録（インデントについて）

2020年10月2日 2021年6月1日 asamai-cts

asamai-cts

全てのページにおいて有効となるよう、CSSには<p>タグには１行目のインデントが効くよう記述しているため、脚注として使用する場合には印刷業者の組版的な目から見るとレイアウト的におかしくなるので、新たなクラスを作成し希望通りに表示させるようにしてみた。

以前、印刷業に籍を置いていてこういう時に役に立ったと今更ながら思うのである。
まず、脚注の囲みを描くため、CSSを下記に自分自身のために備忘録として記述した。

/* 脚注をコラムで囲む処理 */
.footnote-01 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 1.5px #62c1ce;	/水色/
    background: #62c1ce40;
}

.footnote-01 .box-title-01 {
    position: absolute;
    display: inline-block;
    top: -25px;
    left: -1px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    background: #62c1ce; 	/水色/
    color: #ffffff;		/文字白色＝脚中/
    border-radius: 5px 5px 0 0;
}

.footnote-01 p {
    margin: 0; 
    padding: 0;
    font-size: 12px;
}

/* 脚注をコラムで囲む処理 */

.footnote-01 {

position: relative;

margin: 2em 0;

padding: 0.5em 1em;

border: solid 1.5px #62c1ce; /水色/

background: #62c1ce40;

}

.footnote-01 .box-title-01 {

position: absolute;

display: inline-block;

top: -25px;

left: -1px;

padding: 0 9px;

height: 25px;

line-height: 25px;

font-size: 12px;

background: #62c1ce; /水色/

color: #ffffff; /文字白色＝脚中/

border-radius: 5px 5px 0 0;

}

.footnote-01 p {

margin: 0;

padding: 0;

font-size: 12px;

}

また、１行目だけのインデントをコントロールするCSSは下記のとおり。

/* 本文１行目0字下げ */
.textindent0em{
    text-indent: 0em;
}

/* 本文１行目1字下げ */
p { text-indent: 1em;}

/* 本文１行目0字下げ */

.textindent0em{

text-indent: 0em;

}

/* 本文１行目1字下げ */

p { text-indent: 1em;}

脚注とインデントのクラスを組み合わせてみたものが下記のhtmlコード。

/*見出し付き罫囲みの１行目インデントなし*/

&lt;div class="footnote-01">&lt;span class="box-title-01">脚注&lt;/span>
&lt;p class="textindent0em">※１　あいうお◆かきくけこ&lt;br>※２　さしすせそ◆たちつてと&lt;/p>
&lt;/div>

/*見出し付き罫囲みの１行目インデントなし*/

<p class="textindent0em">※１　あいうお◆かきくけこ<br>※２　さしすせそ◆たちつてと</p>

</div>

実際のHTMLで表示されるのは以下の通り。

脚注

※１　あいうお◆かきくけこ
※２　さしすせそ◆たちつてと

Follow me!

@asamai_cts

投稿者プロフィール

asamai-ctsasamai-cts Owner

あさまいCTSの代表オヤジです（2021年現在＝60歳）
横手市中央町で「ラーメン与市」を2012年まで約15年間を経営。
その後、「横手市雇用創出協議会　実践支援員」を経て、一時会社勤めをするが体調を崩し、再度、自営業の世界に戻る。
現在の「あさまいCTS」は2019年１月に起業。業務内容は主に、パソコンの修理、出張スマホ・パソコン教室、ホームページ作成　その他何でも屋みたいなものです・・・